<script lang="ts">
export default {
  name: "patient"
}
</script>
<script setup lang="ts">

import visitor from "@/components/visitor/visitor.vue";
import {reactive, ref, watch} from "vue";
import useHospitalInfoStore from "@/store/hospital_info";
import {storeToRefs} from "pinia";
import {getCityProvince, getHospitalPerson} from "@/api/hospital_info";
import {ElMessage} from "element-plus";
import router from "@/router";
import {useRoute} from "vue-router";

const infoStore = useHospitalInfoStore();
//获取省市区,证件类型
infoStore.getCityProvinceData("86")
infoStore.getCerTypeData("CertificatesType")
infoStore.getHospitalPersonData()


const {users, cerType} = storeToRefs(infoStore);

const userParamsRef = ref<any>()


//form表单赋值
const userParams = reactive({
  id: "",
  name: "",
  certificatesType: "",
  certificatesNo: "",
  sex: 0,
  birthdate: "",
  phone: "",
  isMarry: 0,
  isInsure: 0,
  addressSelected: [],
  address: "",
  contactsName: "",
  contactsCertificatesType: "",
  contactsCertificatesNo: "",
  contactsPhone: "",
});
//0代表显示
const scene = ref<number>(0)

//切换就诊人场景显示与添加
const changeScene = () => {
  scene.value = 1
  restUserInfo()
}

//从挂号页面进来，切换场景值
const route = useRoute();
const routeScene: any = route.query.scene
const userId = route.query.userId
if (routeScene === 0 || routeScene === 1) {
  scene.value = Number(routeScene)
}


watch(users, () => {
  if (userId) {
    //user存在，编辑user
    const findUser = infoStore.users.find((item: any) => item.id == userId);
    Object.assign(userParams, findUser)
  }

})


//省市区地址选择
const props = {
  lazy: true,
  async lazyLoad(node: any, resolve: any) {
    console.log(node)
    const province = await getCityProvince(node.data.value || "86")
    const datas = province.data.map((item: any) => {
      return {
        value: item.value,
        label: item.name,
        leaf: !item.hasChildren,
      }
    })
    resolve(datas)
  }
}


//提交用户数据
const addUserInfo = () => {
  try {
    if (userParams.id) {
      infoStore.editUserInfoData(userParams)
    } else {
      infoStore.addUserInfoData(userParams)
    }
    //添加成功跳转页面
    ElMessage("操作成功")
    router.back()
    //改变场景值
    scene.value = 0

    //再次调用获取user请求数据
    infoStore.getHospitalPersonData()

    //清空组件上次存留内容
    // userParamsRef.value.resetFields()
    restUserInfo()
  } catch (err) {
    ElMessage("操作失败")
  }
}

//重置按钮
const restUserInfo = () => {
  Object.assign(userParams, {
    id: "",
    name: "",
    certificatesType: "",
    certificatesNo: "",
    sex: 0,
    birthdate: "",
    phone: "",
    isMarry: 0,
    isInsure: 0,
    addressSelected: [],
    address: "",
    contactsName: "",
    contactsCertificatesType: "",
    contactsCertificatesNo: "",
    contactsPhone: "",
  })
}


//个人中心进入编辑用户页面
const editUserInfoHandler = async (user: any) => {
//设置场景值
  scene.value = 1
  const res = await getHospitalPerson()

  const findUser = res.data.find((item: any) => item.id == user.id);

  Object.assign(userParams, findUser)

}

</script>

<template>
  <div class="patient">
    <h1 class="tip">确认挂号信息</h1>
    <!-- 卡片:展示就诊人信息 -->
    <el-card class="box-card">
      <!-- 卡片的头部 -->
      <template #header>
        <div class="card-header">
          <span>就诊人管理</span>
          <el-button type="primary" size="default" icon="User" @click="changeScene">添加就诊人</el-button>
        </div>
      </template>
      <!-- 卡片的身体部分展示就诊人信息 -->
      <div class="user" v-if="scene===0">
        <visitor @edit-user-info-handler="editUserInfoHandler"/>
      </div>

      <div v-else>
        <el-divider content-position="left">就诊人信息</el-divider>
        <el-form ref="userParamsRef">
          <el-form-item label="用户姓名">
            <el-input placeholder="请输入用户姓名" v-model="userParams.name"/>
          </el-form-item>
          <el-form-item label="证件类型">
            <el-select placeholder="请选择证件类型" v-model="userParams.certificatesType">
              <template v-for="(item,index) in cerType" :key="index">
                <el-option :label="item.name" :value="item.value"/>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="证件号码">
            <el-input placeholder="请输入证件号码" v-model="userParams.certificatesNo"/>
          </el-form-item>
          <el-form-item label="用户性别">
            <el-radio-group v-model="userParams.sex">
              <el-radio :label=0>男</el-radio>
              <el-radio :label=1>女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-date-picker
                value-format="YYYY-MM-DD"
                v-model="userParams.birthdate"
                type="date"
                placeholder="请选择日期"
            />
          </el-form-item>
          <el-form-item label="手机号码">
            <el-input placeholder="请选择手机号码" v-model="userParams.phone"/>
          </el-form-item>

          <el-divider content-position="left">建档信息(完善后部分医院首次就诊不排队建档)</el-divider>
          <el-form-item label="婚姻状况">
            <el-radio-group v-model="userParams.isMarry">
              <el-radio :label="0">已婚</el-radio>
              <el-radio :label="1">女未婚</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="自费/医保">
            <el-radio-group v-model="userParams.isInsure">
              <el-radio :label="0">自费</el-radio>
              <el-radio :label="1">医保</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="当前住址">
            <el-cascader v-model="userParams.addressSelected" :props="props"/>
          </el-form-item>
          <el-form-item label="详细住址">
            <el-input placeholder="请输入详细住址" v-model="userParams.address"/>
          </el-form-item>

          <el-divider content-position="left">联系人信息(选填)</el-divider>
          <el-form-item label="用户姓名">
            <el-input placeholder="请输入用户姓名" v-model="userParams.contactsName"/>
          </el-form-item>
          <el-form-item label="证件类型">
            <el-select v-model="userParams.contactsCertificatesType" placeholder="请选择证件类型">
              <template v-for="(item,index) in cerType" :key="index">
                <el-option :label="item.name" :value="item.value"/>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="证件号码">
            <el-input placeholder="请输入证件号码" v-model="userParams.contactsCertificatesNo"/>
          </el-form-item>
          <el-form-item label="手机号码">
            <el-input placeholder="请选择手机号码" v-model="userParams.contactsPhone"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addUserInfo">提交</el-button>
            <el-button type="danger" @click="restUserInfo">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="less">
.patient {
  .tip {
    font-weight: 900;
    color: #7f7f7f;
    font-size: 20px;
  }

  .box-card {
    margin: 20px 0px;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .user {
      display: flex;
      flex-wrap: wrap;

      .item {
        width: 32%;
        margin: 5px;
      }
    }
  }

  .btn {
    display: flex;
    justify-content: center;
    margin: 10px 0px;
  }

  .el-form-item {
    width: 60%;
    margin: 15px auto;
  }
}
</style>
